<template>
	<view class="mainbgc">
		<view class="header_tuo_box" :style="{'padding-top': title_top+35 + 'px'}">
			<view class="header_tuo" :style="{'padding-top': title_top+5 + 'px'}">
				<!-- <view class="centers  flexleft flexcenter">
					<view class="all" :class="toplable==1?'gongying':' xuqui'" @click="changetoplable(1)">产品供需</view>
					<view class="alls" :class="toplable==2?'gongying':'xuqui'" @click="changetoplable(2)">物流仓储</view>
				</view> -->
				<view class="centers  flexleft flexcenter" v-show="toplable==1">
					<view class="all" :class="lable==1?'gongying':' xuqui'" @click="changelable(1)">供应</view>
					<view class="alls" :class="lable==2?'gongying':'xuqui'" @click="changelable(2)">需求</view>
				</view>
			</view>
		</view>
		<!-- <view class="" style="padding-top: 50rpx;">
			<view class="centers  flexleft flexcenter" v-show="toplable==1">
				<view class="all" :class="lable==1?'gongying':' xuqui'" @click="changelable(1)">供应</view>
				<view class="alls" :class="lable==2?'gongying':'xuqui'" @click="changelable(2)">需求</view>
			</view>
			<view class="centers  flexleft flexcenter" v-show="toplable==2">
				<view class="all" :class="labletwo==1?'gongying':' xuqui'" @click="changelabletwo(1)">供应</view>
				<view class="alls" :class="labletwo==2?'gongying':'xuqui'" @click="changelabletwo(2)">需求</view>
			</view>
		</view> -->
		<backtop ref="backtops"></backtop>
		<!-- 产品供需 -->
		<view class="content" v-show="toplable==1">
			<!-- 搜索框 -->
			<view class=" ">
				<view class="flexbetween">
					<view class="sousuo flexleft">
						<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
						<input type="text" placeholder="请输入搜索内容" class="inp" v-model="keywords" confirm-type="search"
							@confirm="init">
					</view>
					<!-- <view class="sea " @click="show_cp=true">
						<view class="flexleft">
							<view class="screen"></view>
							<view class="saixuan">筛选</view>
						</view>
					</view> -->
				</view>
				<view class="flexbetween header" v-if="lable==1">
					<view :class="zh_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changezh">综合排序
						<view class="flexcolumn">
							<view class="shanghuijt" v-show="zh_sort==1 || zh_sort==0"></view>
							<view class="shangljt" v-show="zh_sort==2"></view>
							<view class="xiahuijt" v-show="zh_sort==2 || zh_sort==0"></view>
							<view class="xialjt" v-show="zh_sort==1"></view>
						</view>
					</view>
					<!-- <view :class="rq_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changerq">人气排序
						<view class="flexcolumn">
							<view class="shanghuijt" v-show="rq_sort==1 || rq_sort==0"></view>
							<view class="shangljt" v-show="rq_sort==2"></view>
							<view class="xiahuijt" v-show="rq_sort==2 || rq_sort==0"></view>
							<view class="xialjt" v-show="rq_sort==1"></view>
						</view>
					</view> -->
					<uni-data-picker @change="bindPickerChange" :localdata="items">
						<view class="flexleft nostrongtext">地区<view class="grey_jiao"></view>
						</view>
					</uni-data-picker>
					<view @click="yslxshow=true" :class="gx_item_ids!=''?'lansetext flexleft':'nostrongtext flexleft'">
						供应分类
						<view class="flexcolumn">
							<view class="xiahuijt" v-show="gx_item_ids==''"></view>
							<view class="xialjt" v-show="gx_item_ids!=''"></view>
						</view>
					</view>
					<view @click="show_cp=true" class="nostrongtext flexleft">
						产品分类
						<view class="flexcolumn">
							<view class="xiahuijt"></view>
						</view>
					</view>
				</view>
				<view class="flexbetween header" v-else>
					<view :class="zh_sorts!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changezh2">综合排序
						<view class="flexcolumn">
							<view class="shanghuijt" v-show="zh_sorts==1 || zh_sorts==0"></view>
							<view class="shangljt" v-show="zh_sorts==2"></view>
							<view class="xiahuijt" v-show="zh_sorts==2 || zh_sorts==0"></view>
							<view class="xialjt" v-show="zh_sorts==1"></view>
						</view>
					</view>
					<!-- <view :class="rq_sorts!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changerq2">人气排序
						<view class="flexcolumn">
							<view class="shanghuijt" v-show="rq_sorts==1 || rq_sorts==0"></view>
							<view class="shangljt" v-show="rq_sorts==2"></view>
							<view class="xiahuijt" v-show="rq_sorts==2 || rq_sorts==0"></view>
							<view class="xialjt" v-show="rq_sorts==1"></view>
						</view>
					</view> -->
					<uni-data-picker @change="bindPickerChange2" :localdata="items">
						<view class="flexleft nostrongtext">地区<view class="grey_jiao"></view>
						</view>
					</uni-data-picker>
					<view @click="yslxshow=true" :class="gx_item_ids!=''?'lansetext flexleft':'nostrongtext flexleft'">
						需求分类
						<view class="flexcolumn">
							<view class="xiahuijt" v-show="gx_item_ids==''"></view>
							<view class="xialjt" v-show="gx_item_ids!=''"></view>
						</view>
					</view>
					<view @click="show_cp=true" class="nostrongtext flexleft">
						产品分类
						<view class="flexcolumn">
							<view class="xiahuijt"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 招聘--搜索列表-->
			<view class="flexcenter" style="margin-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="center relative" @click="xiangqing(item.id)" v-for="item in list.data" :key="item.id">
					<view class="yxlable" v-show="item.yx_type==1">优选</view>
					<view class="flexbetween flex_wrap">
						<view class="flexleft">
							<view class="image_ya">
								<image :src="item.user.avatar_text" mode=""></image>
							</view>
							<view class="center_zi">
								<view class="word_hei">{{item.user.nickname}}</view>
								<view class="hui">{{item.createtime_text}}</view>
							</view>

						</view>
						<view class="flexleft">
							<view class="province_jiangsu">{{item.cityinfo}}</view>
						</view>
					</view>
					<view class="flexleft flex_wrap">
						<view class="gongyings" v-for="ite in item.gx_item_text" :key="ite">{{ite}}</view>
					</view>
					<view class="margin_top">
						<view class="quigou hui">{{item.category_text}}</view>
					</view>
					<view class="TV flexbetween">
						<view class="hei">{{item.title}}</view>
						<view class="quigou hui">{{lable==1?"供应":"求购"}}：{{item.num}}个</view>
					</view>
					<view class="hui_zi">{{item.des}}</view>
					<!-- 图片 -->
					<view class="flexleft margin_top flex_wrap">
						<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
							<view class="item_image ">
								<image :src="ite" mode=""></image>
							</view>
						</view>
					</view>
					<view class="flexbetween bottom_zi">
						<view class="hui">浏览：{{item.views}}次</view>
						<view class="hui">收藏：{{item.collect_num}}次</view>
						<view class="hui">分享：{{item.share_num}}次</view>
						<view class="hui">拨打：{{item.call_num}}次</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

			<!-- 产品分类 -->
			<u-popup :show="show_cp" :round="10" @close="show_cp=false">
				<view class="mainpadding flexcenter">产品</view>
				<view class="flexleft">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="leftscroll">
						<view :class="item.ischeck?'itemfocus':'itemnofocus'" v-for="(item,index) in leftlist"
							:key="item.id" @click="changestatus(item,index)">
							<view :class="item.ischeck?'lablefocus':'lablenofocus'">{{item.name}}</view>
						</view>
					</scroll-view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="rightscroll mainpadding">
						<view v-for="item in rightlist" :key="item.id">
							<view class="titletext">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="ite.ischeck?'focusbgc margin_top itemlable margin_right':'nofocusbgc margin_top itemlable margin_right'"
									v-for="ite in item.childlist" :key="ite.id" @click="changesmallStatus(ite,item.id)">
									{{ite.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flexbetween mainpadding">
					<view class="resetbtn" @click="resetcpfl">重置</view>
					<view class="surebtn" @click="sure">确定</view>
				</view>
			</u-popup>
			<!-- 供需分类 -->
			<u-popup :show="yslxshow" :round="10" mode="bottom" @close="yslxshow=false">
				<view class="nav">
					<view class="form">供应分类</view>
					<view class="flexleft flex_wrap">
						<view :class="item.ischeck?' lan':'pu'" v-for="(item,index) in gylxclounms" :key="item.id"
							@click="changeitem(item)">
							{{item.name}}
						</view>
					</view>
					<view class="footer flexbetween">
						<view class="resetbtn" @click="resetzblx">重置</view>
						<view class="surebtn" @click="Confirmzblx">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 物流仓储 -->
		<view class="content1" v-show="toplable==2">
			<!-- 搜索框 -->
			<view class=" ">
				<view class="flexleft">
					<view class="ss flexleft">
						<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
						<input type="text" placeholder="请输入搜索内容" class="inp" v-model="keywordstwo" confirm-type="search"
							@confirm="init">
					</view>
				</view>
				<!-- 筛选 -->
				<view class="flexbetween header">
					<uni-data-picker @change="bindPickerChangetwo" :localdata="items">
						<view class="flexleft nostrongtext">地区<view class="grey_jiao paixu"></view>
						</view>
					</uni-data-picker>
					<view @click="cklxshow=true" class="flexleft nostrongtext">仓库类型<view class="grey_jiao paixu"></view>
					</view>
					<view @click="show_fenlei=true" class="flexleft nostrongtext">筛选<view class="grey_jiao paixu">
						</view>
					</view>
				</view>
				<view class="flexbetween nav">
					<view :class="zh_sort1!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changezhwl">
						<view class="zong">综合</view>
						<view :class="zh_sort1==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="zh_sort1==2?'blue_bottom':'grey_bottom'"></view>
					</view>
					<view :class="distance_sort1!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changejl">
						<view class="zong">距离</view>
						<view :class="distance_sort1==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="distance_sort1==2?'blue_bottom':'grey_bottom'"></view>
					</view>
					<view :class="ckmj_sort1!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changemj">
						<view class="zong">面积</view>
						<view :class="ckmj_sort1==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="ckmj_sort1==2?'blue_bottom':'grey_bottom'"></view>
					</view>
				</view>
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view v-show="labletwo==1">
						<view class="chuzu flexleft" @click="cangchuxq(item.id)" v-for="item in list.data"
							:key="item.id">
							<view class="yxlable" v-show="item.yx_type==1">优选</view>
							<view class="ccimg_relative">
								<image :src="item.image_text" mode="" class="chuzu_img"></image>
								<view class="right_chuzu" v-show="item.item.name=='出租'">{{item.item.name}}</view>
								<view class="right_chushou" v-show="item.item.name=='出售'">{{item.item.name}}</view>
							</view>
							<view class="chuzu_a">
								<view class="flexbetween">
									<view class="word_weight">{{item.ckmj}}㎡{{item.ckitem.name}}</view>

								</view>
								<view class="chuzu_center flexleft">
									<image src="@/static/images/sy_slices/hongbi.png" mode="" class="tubiao"></image>
									<view class="yuan">{{item.cszj}}</view>
								</view>
								<view class="dingwie flexleft">
									<view class="location"></view>
									<view class="dizhi">{{item.cityinfo}}</view>
									<view class="word_bluer">{{kmUnit(Number(item.distance))}}</view>
								</view>
							</view>
						</view>
					</view>

					<view v-show="labletwo==2">
						<view class="chuzu flexleft" @click="xiangqing(item.id)" v-for="item in list.data"
							:key="item.id">
							<view class="yxlable" v-show="item.yx_type==1">优选</view>
							<view class="ccimg_relative">
								<image :src="item.image_text" mode="" class="chuzu_img"></image>
								<view class="right_chuzu" v-show="item.item.name=='出租'">{{item.item.name}}</view>
								<view class="right_chushou" v-show="item.item.name=='出售'">{{item.item.name}}</view>
							</view>
							<view class="chuzu_a">
								<view class="flexbetween">
									<view class="word_weight">{{item.ckmj}}㎡{{item.ckitem.name}}</view>
								</view>
								<view class="chuzu_center flexleft">
									<image src="@/static/images/sy_slices/hongbi.png" mode="" class="tubiao"></image>
									<view class="yuan">{{item.cszj}}</view>
								</view>
								<view class="dingwie flexleft">
									<view class="location"></view>
									<view class="dizhi">{{item.cityinfo}}</view>
									<view class="word_bluer">{{kmUnit(Number(item.distance))}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>
			</view>
			<!-- 筛选-->
			<u-popup :show="show_fenlei" :round="10" mode="bottom" @close="close" @open="open">
				<view class="nav">
					<view class="form">筛选</view>
					<view class="word_weight">用途类型</view>
					<view class=" flexleft flex_wrap mainpadding2">
						<view :class="item.id==ytlxid?'lan':'pu'" v-for="item in ytlx" :key="item.id"
							@click="ytlxchange(item.id,0)">{{item.name}}</view>
					</view>
					<view class=" word_weight">供需类型</view>
					<!-- 供应 -->
					<view class="flexleft flex_wrap mainpadding2" v-show="lable==1">
						<view :class="item.id==gylxid?'lan':'pu'" v-for="item in gylx" :key="item.id"
							@click="ytlxchange(item.id,1)">{{item.name}}</view>
					</view>
					<!-- 需求 -->
					<view class="flexleft flex_wrap mainpadding2" v-show="lable==2">
						<view :class="item.id==xqlxid?'lan':'pu'" v-for="item in xqlx" :key="item.id"
							@click="ytlxchange(item.id,2)">{{item.name}}</view>
					</view>
					<view class=" word_weight">仓库面积㎡</view>
					<view class="flexbetween margin_top">
						<input type="number" placeholder="仓库面积最小值" class="iteminput" v-model="min_mj">
						<input type="number" placeholder="仓库面积最大值" class="iteminput" v-model="max_mj">
					</view>
					<view class="footer flexbetween">
						<view class="resetbtn " @click="reset">重置</view>
						<view class=" surebtn" @click="Confirm">确认</view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 仓库类型选择器 -->
		<cangkulxpicker :messageInfo="{cklxshow:cklxshow}" @surecklx="surecklx"></cangkulxpicker>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				title_top: 0, //顶部距离，px
				lable: 1, //1供应，2需求
				toplable: 1, //1产品供需，2物流仓储
				labletwo: 1, //1供应,2需求
				// 产品分类开始
				show_cp: false,
				leftlist: [],
				rightlist: [],
				category_id: "", //产品分类id
				lastchangeindex: 0,
				// 产品分类结束
				// 供应分类开始
				gylxclounms: [],
				yslxshow: false,
				gx_item_ids: "",
				gx_item: "",
				// 供应分类结束
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
				zh_sort: 0,
				rq_sort: 0,
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				zh_sorts: 0,
				rq_sorts: 0,
				address2: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				area: [],
				items: [],
				shuaxin: true,
				/* 物流仓储 */

				keywordstwo: "",
				show_fenlei: false,
				// 筛选
				addresstwo: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				// 仓库数据
				lat: "",
				lng: "",
				// 仓库类型选择器组件内容开始
				cklxshow: false,
				cklx: {
					name: "",
					id: "",
				},
				// 仓库类型选择器组件内容结束
				ytlx: [], //用途类型
				ytlxid: "",
				gylx: [], //供应类型
				gylxid: "",
				xqlx: [], //需求类型
				xqlxid: "",
				zh_sort1: 0, //0=不按综合排序,1=降序.2=升序
				distance_sort1: 0, //0=不按距离排序,1=降序,2=升序
				ckmj_sort1: 0, //0=不按仓库面积,1=降序,2=升序
				min_mj: "",
				max_mj: "",
				categoryIdList: [],
				categoryNameList: [],
				oneCategoryId: ""
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onLoad() {
			// 添加全国，向每个市,区里面添加不限，
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "0312",
						"text": "不限",
						"pid": "0304"
					})
				})
				item.children.unshift({
					"value": "0311",
					"text": "不限",
					"pid": "0304",
				})
			})
			arr.unshift({
				"value": "0310",
				"text": "全国",
				"pid": "0304",
			})
			this.items = arr
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.title_top = menuButtonInfo.top

			this.gyflList()
			// this.getlocation()
			// this.getytlx() //用途类型
			// this.gyxqlx() //供应需求类型
		},
		onShow() {
			this.area = []
			this.address = {
				province: "", //省
				city: "", //市
				county: "", //区
			}
			this.init()
			this.cpflList()
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		methods: {
			gyflList() {
				httpRequest.request('/api/gx/gxItem', 'GET', {
					type: this.lable
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
						})
						this.gylxclounms = res.data
					}
				})
			},
			changeitem(item) {
				item.ischeck = !item.ischeck
			},
			Confirmzblx() {
				let arr = []
				let arr1 = []
				this.gylxclounms.forEach(item => {
					if (item.ischeck) {
						arr.push(item.id)
						arr1.push(item.name)
					}
				})
				this.gx_item_ids = arr.join()
				this.gx_item = arr1.join()
				this.yslxshow = false
				this.init()
			},
			resetzblx() {
				this.gylxclounms.forEach(item => {
					item.ischeck = false
				})
				this.gx_item_ids = ""
				this.gx_item = ""
				this.yslxshow = false
				this.init()
			},
			changezh() {
				this.zh_sort = this.zh_sort == 0 ? 1 : this.zh_sort == 1 ? 2 : 0
				this.init()
			},
			changezh2() {
				this.zh_sorts = this.zh_sorts == 0 ? 1 : this.zh_sorts == 1 ? 2 : 0
				this.init()
			},

			changerq() {
				this.rq_sort = this.rq_sort == 0 ? 1 : this.rq_sort == 1 ? 2 : 0
				this.init()
			},
			changerq2() {
				this.rq_sorts = this.rq_sorts == 0 ? 1 : this.rq_sorts == 1 ? 2 : 0
				this.init()
			},
			changezhwl() {
				this.zh_sort1 = this.zh_sort1 == 1 ? 2 : this.zh_sort1 == 2 ? 0 : 1
				this.init()
			},
			changejl() {
				this.distance_sort1 = this.distance_sort1 == 1 ? 2 : this.distance_sort1 == 2 ? 0 : 1
				this.init()
			},
			changemj() {
				this.ckmj_sort1 = this.ckmj_sort1 == 1 ? 2 : this.ckmj_sort1 == 2 ? 0 : 1
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				let data = {}
				let url = "/api/gx/gxList"
				if (this.toplable == 1) {
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: this.keywords,
						type: this.lable,
						gx_item_ids: this.gx_item_ids,
						category_id: this.category_id,
						zh_sort: this.lable == 1 ? this.zh_sort : this.zh_sorts,
						rq_sort: this.lable == 1 ? this.rq_sort : this.rq_sorts,
						province_id: this.lable == 1 ? this.address.province : this.address2.province,
						city_id: this.lable == 1 ? this.address.city : this.address2.city,
						area_id: this.lable == 1 ? this.address.county : this.address2.county,
					}
				} else {
					url = "/api/cc/ccList"
					data = {
						page: page || 1,
						limit: _this.limit,
						lat: this.lat,
						lng: this.lng,
						keywords: this.keywordstwo,
						type: this.lable, //1=供应.2=需求
						cc_item_id: this.lable == 1 ? this.gylxid : this.xqlxid, //仓储类型ID
						ck_item_id: this.cklx.id, //仓库类型ID
						min_mj: this.min_mj, //最小仓储面积
						max_mj: this.max_mj, //最大仓储面积
						province_id: this.addresstwo.province, //省ID
						city_id: this.addresstwo.city, //市ID
						area_id: this.addresstwo.county, //区ID
						zh_sort: this.zh_sort1, //综合排序:0=不按综合排序,1=降序.2=升序
						distance_sort: this.distance_sort1, //距离排序:0=不按距离排序,1=降序,2=升序
						ckmj_sort: this.ckmj_sort1, //仓库面积排序:0=不按仓库面积,1=降序,2=升序
						index_yx: 0, //优选仓储:0=不优选,1=优选
					}
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 产品分类多选开始
			cpflList() {
				httpRequest.request('/api/goods/categoryList', 'GET', {
					hot_status: 0,
					category_type: 3
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
							item.childlist.forEach(ite => {
								ite.childlist.forEach(it => {
									this.$set(it, "ischeck", false)
								})
							})
						})
						res.data[0].ischeck = true
						this.leftlist = res.data
						this.rightlist = res.data[0].childlist
					}
				})
			},
			resetcpfl(value) {
				this.leftlist.forEach(items => {
					items.childlist.forEach(item => {
						item.childlist.forEach(ite => {
							ite.ischeck = false
						})
					})
				})
				this.category_id = ""
				this.oneCategoryId = ""
				this.categoryIdList = []
				if (value == 1) {
					return false
				}
				this.show_cp = false
				this.init()
			},
			sure() {
				// let arr = []
				// this.leftlist.forEach(items => {
				// 	items.childlist.forEach(item => {
				// 		item.childlist.forEach(ite => {
				// 			if (ite.ischeck) {
				// 				arr.push(ite.id)
				// 			}
				// 		})
				// 	})
				// })
				// this.category_id = arr.join()
				this.category_id = this.categoryIdList.join()
				this.show_cp = false
				this.init()
			},
			changestatus(data, index) {
				this.leftlist[this.lastchangeindex].childlist = this.rightlist
				this.lastchangeindex = index
				this.leftlist.forEach(item => {
					if (item.id == data.id) {
						item.ischeck = true
						this.rightlist = item.childlist
					} else {
						item.ischeck = false
					}
				})
				this.resetcpfl(1)
			},
			changesmallStatus(data, id) {
				// data.ischeck = !data.ischeck
				if (!this.oneCategoryId) {
					this.resetcpfl(1)
					this.oneCategoryId = id
					data.ischeck = !data.ischeck
					this.rightlist.forEach(item => {
						item.childlist.forEach(ite => {
							if (ite.ischeck) {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index == -1) {
									this.categoryIdList.push(ite.id)
									this.categoryNameList.push(ite.name)
								}
							} else {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index != -1) {
									this.categoryIdList.splice(index, 1)
									this.categoryNameList.splice(index, 1)
								}
							}
						})
					})
				} else {
					if (this.oneCategoryId == id) {
						console.log(2,this.oneCategoryId)
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					} else {
						console.log(3,this.oneCategoryId)
						this.resetcpfl(1)
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					}
				}
				console.log(this.categoryIdList)
			},
			// 产品分类多选结束
			xiangqing(id) {
				uni.navigateTo({
					url: '/pages/supply/gongyingxq?id=' + id
				})
			},
			changelable(value) {
				this.lable = value
				this.leftlist.forEach(items => {
					items.childlist.forEach(item => {
						item.childlist.forEach(ite => {
							ite.ischeck = false
						})
					})
				})
				this.category_id = ""
				this.show_cp = false
				this.gylxclounms.forEach(item => {
					item.ischeck = false
				})
				this.gx_item_ids = ""
				this.gx_item = ""
				this.init()
				this.gyflList()


			},
			changelabletwo(value) {
				this.labletwo = value
				this.init()
			},
			changetoplable(value) {
				this.toplable = value
				this.init()
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address.province = area[0].value;
					this.address.city = area[1].value;
					this.address.county = area[2].value == "0312" ? "" : area[2].value;
				} else if (area.length == 2) {
					this.area = [area[0].text, area[1].text, "不限"];
					this.address.province = area[0].value;
					this.address.city = area[1].value == "0311" ? "" : area[1].value;
					this.address.county = ""
				} else {
					this.area = ["全国", "不限", "不限"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
			bindPickerChange2(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address2.province = area[0].value;
					this.address2.city = area[1].value;
					this.address2.county = area[2].value == "0312" ? "" : area[2].value;
				} else if (area.length == 2) {
					this.area = [area[0].text, area[1].text, "不限"];
					this.address2.province = area[0].value;
					this.address2.city = area[1].value == "0311" ? "" : area[1].value;
					this.address2.county = ""
				} else {
					this.area = ["全国", "不限", "不限"];
					this.address2.province = "";
					this.address2.city = "";
					this.address2.county = ""
				}
				this.init()
			},
			bindPickerChangetwo(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.addresstwo.province = area[0].value;
					this.addresstwo.city = area[1].value;
					this.addresstwo.county = area[2].value == "0312" ? "" : area[2].value;
				} else if (area.length == 2) {
					this.area = [area[0].text, area[1].text, "不限"];
					this.addresstwo.province = area[0].value;
					this.addresstwo.city = area[1].value == "0311" ? "" : area[1].value;
					this.addresstwo.county = ""
				} else {
					this.area = ["全国", "不限", "不限"];
					this.addresstwo.province = "";
					this.addresstwo.city = "";
					this.addresstwo.county = ""
				}
				this.init()
			},
			// 用途类型
			getytlx() {
				httpRequest.request('/api/cc/ytItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.ytlx = res.data
					}
				})
			},
			// 供需类型
			gyxqlx() {
				httpRequest.request('/api/cc/ccItem', 'GET', {
					type: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.gylx = res.data
					}
				})
				httpRequest.request('/api/cc/ccItem', 'GET', {
					type: 2
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.xqlx = res.data
					}
				})
			},
			surecklx(e) {
				this.cklx = e
				this.init()
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
					}
				});
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			// xiangqing(id) {
			// 	uni.navigateTo({
			// 		url: '/pages/index/cangchuxqxq?id=' + id
			// 	})
			// },
			fanhui() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			cangchuxq(id) {
				uni.navigateTo({
					url: '/pages/index/cangchugyxq?id=' + id
				})
			},
			ytlxchange(id, value) {
				if (value == 0) {
					this.ytlxid = id
				} else if (value == 1) {
					this.gylxid = id
				} else {
					this.xqlxid = id
				}
			},
			reset() {
				this.ytlxid = ""
				this.gylxid = ""
				this.xqlxid = ""
				this.min_mj = ""
				this.max_mj = ""
				this.init()
				this.show_fenlei = false;
			},
			Confirm() { //点击确认关闭弹窗
				this.show_fenlei = false;
				this.init()
			},
			close() {
				this.show_fenlei = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gongyings {
		margin: 10rpx 10rpx 0 0;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(34, 141, 255, 1);
		padding: 3rpx 29rpx 4rpx 29rpx;
		background-color: RGBA(233, 244, 255, 1);
		margin-top: 14rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.item_image_box {
		width: 25%;
	}

	.header_tuo {
		position: fixed;
		left: 0;
		z-index: 300;
		width: 100%;
		box-sizing: border-box;
		top: 0;
		background-color: #fff;
		padding-bottom: 10rpx;
	}

	.paixu {
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.content {
		padding: 24rpx;

		.centers {
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.center_a {
			padding: 100rpx 0rpx 30rpx 0rpx;
			background-color: #ffff;
		}

		.bottom_zi {
			padding-top: 30rpx;
		}

		.search {
			width: 27rpx;
			height: 27rpx;
		}

		.sousuo {
			width: 100%;
			background-color: #f3f3f3;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			padding: 18rpx 20rpx 18rpx 42rpx;
		}

		.inp {
			background-color: #f3f3f3;
			width: 400rpx;
			padding: 0rpx 0rpx 0rpx 24rpx;
		}

		.sea {
			margin-left: 20rpx;
			padding: 12rpx 21rpx 12rpx 21rpx;
			border: 1rpx solid #228DFF;
			border-radius: 30rpx;
		}

		.saixuan {
			font-size: 24rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #228DFF;
		}

		.screen {
			margin-right: 10rpx;
		}

		.quigou {

			color: #228DFF;
		}

		.header {
			margin-top: 30rpx;
			background-color: #fff;
			padding: 27rpx 28rpx 27rpx 28rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.center {
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			background-color: #fff;
			padding: 30rpx 30rpx;
		}

		.center_zi {
			padding: 0rpx 20rpx;
		}

		.hei {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-top: 15rpx;
		}

		.hui_zi {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			padding-top: 24rpx;
			//超出两行省略号
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.ya {
			padding: 34rpx 19rpx 0rpx 30rpx;
		}

		.form {
			text-align: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.pu {
			background: RGBA(247, 249, 250, 1);
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			padding: 20rpx 60rpx 21rpx 60rpx;
			margin: 30rpx 0rpx 0rpx 30rpx;
		}

		.lan {
			background: RGBA(233, 244, 255, 1);
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			padding: 20rpx 60rpx 21rpx 60rpx;
			margin: 30rpx 0rpx 0rpx 30rpx;
		}

		.footer {
			padding: 30rpx 30rpx;
		}

		.nav {
			padding: 30rpx 30rpx;
		}

		.time {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #626365;
			padding-top: 10rpx;
		}

		.transport {
			height: 270rpx;
			overflow-x: hidden;
		}

		// 筛选
		.itemlable {
			padding: 15rpx 35rpx;
			border-radius: 10rpx;
		}

		.nofocusbgc {
			background-color: #EFEFEF;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.focusbgc {
			background-color: rgba(34, 141, 255, .1);
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
		}

		// 未选中
		.itemnofocus {
			background-color: #fff;
			padding: 25rpx 0 25rpx 20rpx;
			text-align: center;
		}

		// 选中
		.itemfocus {
			background-color: #fafafa;
			padding: 25rpx 0 25rpx 20rpx;
			text-align: center;
		}

		.rightscroll {
			width: calc(100vw - 200rpx);
			background-color: #fafafa;
			height: 500rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
		}

		.hui {
			padding-top: 10rpx;
		}

		// 
		.leftscroll {
			height: 500rpx;
			width: 200rpx;
		}



		.lablefocus {
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #228DFF;
			border-left: 2rpx solid #228DFF;
			// padding-left: 10rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}

		.lablenofocus {
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #666666;
			padding-left: 2rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}
	}

	.all {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.alls {
		background: #228DFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.xuqui {
		background: #fff;
		color: #228DFF;
		border: 2rpx solid #228DFF;
	}

	.gongying {
		background: #228DFF;
		color: #ffff;
		border: 2rpx solid #228DFF;
	}

	.content1 {
		padding: 30rpx 24rpx 30rpx 24rpx;
		position: relative;

		.centers {
			position: fixed;
			left: 0;
			z-index: 300;
			width: 100%;
			box-sizing: border-box;
			top: 0;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			padding: 83rpx 0rpx 16rpx 0rpx;
			background-color: #fff;
			padding-top: 100rpx;
		}

		.center_a {
			padding: 100rpx 0rpx 30rpx 0rpx;
			background-color: #ffff;
		}

		.search {
			width: 27rpx;
			height: 27rpx;
		}

		.ss {
			width: 100%;
			background-color: #f3f3f3;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			padding: 18rpx 20rpx 18rpx 42rpx;
		}

		.inp {
			background-color: #f3f3f3;
			width: 400rpx;
			padding: 0rpx 0rpx 0rpx 24rpx;
		}

		.header {
			margin-top: 30rpx;
			background-color: #fff;
			padding: 27rpx 28rpx 27rpx 28rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.center {
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			background-color: #fff;
			padding: 30rpx 30rpx;
		}

		.zong {
			padding-right: 6rpx;
		}

		.hei {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.form {
			text-align: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.pu {
			background: RGBA(247, 249, 250, 1);
			border-radius: 41rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin: 30rpx 10rpx 0 0;
			width: 200rpx;
			padding: 20rpx 15rpx;
			box-sizing: border-box;
			text-align: center;
		}

		.lan {
			background: RGBA(233, 244, 255, 1);
			border-radius: 41rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			margin: 30rpx 10rpx 0 0;
			width: 200rpx;
			padding: 20rpx 15rpx;
			box-sizing: border-box;
			text-align: center;
		}

		.footer {
			padding: 30rpx 30rpx 60rpx 30rpx;
		}

		.gaoliang {
			padding: 9rpx 43rpx 10rpx 27rpx;
			background-color: RGBA(228, 239, 250, 1);
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			// margin-right: 30rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.bugaoliang {
			padding: 9rpx 43rpx 10rpx 27rpx;
			background-color: #fff;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			// margin-right: 30rpx;
		}



		.nav {
			padding: 30rpx 30rpx;
		}

		//
		.chuzu_img {
			width: 132rpx;
			height: 132rpx;
			background-size: 100% 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;

		}

		.chuzu {
			padding: 30rpx 30rpx;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			position: relative;
		}

		.tubiao {
			width: 16rpx;
			height: 23rpx;
			padding-right: 14rpx;
		}

		.dizhi {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-right: 16rpx;
		}



		.chuzu_a {
			padding-left: 19rpx;
			flex-grow: 1;
			align-self: flex-start;
		}

		.chuzu_center {
			padding-top: 14rpx;
		}

		.dingwie {
			padding-top: 16rpx;
		}

		.yuan {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF3A3A;
		}
	}
</style>